<template>
    <div id="userInfo">
        <NavBarTitle :NavBarTitle="NavBarTitle"/>
        <van-form @submit="onSubmit">
            <!--头像-->
            <van-field
                    label="头像"
                    size="14px"
                    input-align="right"
                    center
                    label-class="color:#999999"
                    is-link
                    :border="false"
            >
                <template #button>
                    <van-uploader v-model="fileList" :after-read="onRead" multiple :max-count="1" />
                </template>
            </van-field>
            <div class="line"/>
            <!--昵称-->
            <van-field
                    v-model="username"
                    name="username"
                    label="昵称"
                    clearable
                    input-align="right"
                    placeholder="请输入用户名"
                    :rules="[{ required: true, message: '请输入用户名' }]"
            />
            <!--手机号码-->
            <van-field
                    v-model="mobile"
                    type="number"
                    name="mobile"
                    input-align="right"
                    clearable
                    label="手机号码"
                    placeholder="请输入手机号码"
                    :rules="[{ required: true, message: '请输入手机号码' }]"
            />
            <div class="line"/>
            <!--真实姓名-->
            <div class="relName">
                <van-field
                        input-align="right"
                        clearable
                        label="实名认证"
                        readonly
                />
            </div>
            <!--姓名-->
            <van-field
                    v-model="relName"
                    name="relName"
                    label="姓名"
                    clearable
                    input-align="right"
                    placeholder="请输入姓名"
                    :rules="[{ required: true, message: '请输入姓名' }]"
            />
            <!--身份证号码-->
            <van-field
                    v-model="idCard"
                    name="idCard"
                    label="身份证号码"
                    clearable
                    input-align="right"
                    placeholder="请输入身份证号码"
                    :rules="[{ required: true, message: '请输入身份证号码' }]"
            />
            <!--图片上传-->
            <!--<div class="upCardF">-->
                <!--<van-field name="uploader_card" label="上传身份证">-->
                    <!--<template #input>-->
                        <!--<div class="upCard flex">-->
                            <!--<van-uploader v-model="uploaderfront" name="legal_personl_id1" :after-read="afterRead" deletable :max-count="1">-->
                                <!--<div class="frontF flex column jCenter aCenter">-->
                                    <!--<div class="front flex jCenter aCenter">-->
                                        <!--<span class="iconfont camera">&#xe672;</span>-->
                                    <!--</div>-->
                                    <!--<div>(正面)</div>-->
                                <!--</div>-->
                            <!--</van-uploader>-->

                            <!--<van-uploader v-model="uploaderverso" name="legal_personl_id2" :after-read="afterRead" deletable :max-count="1">-->
                                <!--<div class="versoF flex column jCenter aCenter">-->
                                    <!--<div class="verso flex jCenter aCenter">-->
                                        <!--<span class="iconfont camera">&#xe672;</span>-->

                                    <!--</div>-->
                                    <!--<div>(反面)</div>-->
                                <!--</div>-->
                            <!--</van-uploader>-->
                        <!--</div>-->
                    <!--</template>-->
                <!--</van-field>-->
            <!--</div>-->
            <div style="margin: 36px 12px 12px 12px;">
                <van-button block type="info" color="#0fa0a0" native-type="submit" style="font-size:18px">
                    保存
                </van-button>
            </div>
        </van-form>
        <Loading :isLoading="isLoading"/>
    </div>
</template>

<script>
    import Loading from 'components/Loading.vue'
    import NavBarTitle from 'components/NavBarTitle.vue'
    export default {
        data() {
            return {
                username:'',
                mobile:'',
                fileList:[],
                relName:'',
                idCard:'',
                uploaderfront: [],//法人姓名
                uploaderverso: [],//上传身份证正反面
                NavBarTitle:'个人资料',
                isLoading: true,
                src: '',
            }
        },
        components: {
            NavBarTitle,
            Loading
        },
        methods: {
            onSubmit(values) {
                console.log('submit', values);
                let data = {
                    token: this.$store.state.token,
                    nickname: values.username,
                    headimg: this.src,
                    name: values.relName,
                    idcard: values.idCard,
                    telephone: values.mobile
                };
                this.$axios.post(this.$index+this.$api.user.saveinfo,this.$Qs.stringify(data))
                    .then((res) => {
                        console.log(res);
                        if(res.data.flag){
                            this.$toast.success({
                                message: res.data.msg,
                                duration: 1000,
                                onClose: () => {
                                    this.$router.replace('/user');
                                }
                            });
                        }else {
                            this.$toast(res.data.msg)
                        }
                    }).catch((err) => {
                    console.log(err);
                })

            },
            onRead(file){
                console.log(file);
                let url = this.$index+this.$api.user.upload+'?token='+ this.$store.state.token;
                let data = new FormData();
                data.append('file',file.file);
                data.append('token',this.$store.state.token);
                this.$axios.post(url,data)
                    .then((res) => {
                        console.log(res);
                        if(res.data.flag){
                            this.src = res.data.data.src;
                            this.$toast.success('上传成功');
                        }else {
                            this.$toast(res.data.msg);
                        }
                    }).catch((err) => {
                    console.log(err);
                })
            }
        },
        beforeMount() {

        },
        created(){
            let data = {
                token: this.$store.state.token,
            };
            this.$axios.post(this.$index+this.$api.user.info,this.$Qs.stringify(data))
                .then((res) => {
                    console.log(res);
                    if(res.data.flag){
                        this.username = res.data.data.nickname;
                        this.mobile = res.data.data.telephone;
                        this.idCard = res.data.data.idcard;
                        this.relName = res.data.data.name;
                        this.src = res.data.data.head_img;
                        this.fileList.push({url: res.data.data.head_img,isImage: true});
                        this.isLoading = false
                    }else {
                        this.$toast(res.data.msg)
                    }
                }).catch((err) => {
                console.log(err);
            })
        }
    }
</script>

<style scoped>
    .upCardF {
        position: relative;
        overflow: inherit;
    }

    .upCardF /deep/ .van-cell {
        height: 194px;
    }
    .upCardF /deep/ .van-uploader__preview-image {
        width: 100px;
        height: 100px;
    }

    .upCard {
        position: absolute;
        top: 50px;
        left: -88px;
    }

    .front, .verso {
        width: 100px;
        height: 100px;
        background: #eaeaea;
        margin-right: 8px;
    }

    .camera {
        font-size: 30px;
        color: #ffffff;
    }

    .upCardF {
        border-bottom: 5px solid #f7f7f7;
    }
    .line{
        width: 100%;
        height: 8px;
        background-color: #f7f7f7;
    }
    /deep/.van-cell{
        color: #999999;
        padding: 12px 12px;
    }
    /deep/.van-button--info {
        border: none;
        border-radius: 5px;
    }
    /deep/.van-uploader__upload {
        border: none;
        border-radius: 50%;
        width: 62.78px;
        height: 63.06px;
    }
    /deep/.van-uploader__file {
        border: none;
        border-radius: 50%;
        width: 62.78px;
        height: 63.06px;
    }
    /deep/.van-uploader__preview-image {
        border: none;
        border-radius: 50%;
        width: 62.78px;
        height: 63.06px;
    }
    .relName /deep/.van-cell{
        color: #333333;
    }
</style>